<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/react.development.js"></script>
    <script src="js/react-dom.development.js"></script>
    <script src="js/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">


    class Welcome extends React.Component {  //定义
        render() {
            return (
                <h1>Hello, {this.props.name}</h1>
            )
        }
    }

    class WelcomeAll extends React.Component {
        render() {
            return (
                <div>
                    <Welcome name="Sara"/>
                    <Welcome name="Con"/>
                    <Welcome name="pos"/>
                </div>
            );
        }
    }

    class Run extends React.Component {

        constructor(props) {
            super(props);
            this.state = {iNum: 10};
        }


        run() {
            // this.setState({
            //     iNum: this.state.iNum + 1
            // });

            this.setState(pre => {
                pre.iNum += 1;
                return pre;
            })
        }

        render() {
            return (
                <div>
                    <p>{this.state.iNum}</p>
                    <input type="button" value="大招" onClick={this.run.bind(this)}/>
                </div>
            );
        }
    }


    // ReactDOM.render(<WelcomeAll/>, document.getElementById('root'));
    ReactDOM.render(<Run name/>, document.getElementById('root'));

</script>

</body>
</html>